import React from 'react';
import { Tabs } from 'antd-mobile';
import { Divcon, Leftdiv,Rightdiv } from './DetailSty'
import FloorBn from '@c/floorbn/Floorbn'
import { Toast } from 'antd-mobile';

const tabs2 = [
    { title: '学生完成情况', sub: '1' },
    { title: '题目正确率', sub: '2' },
];

const Detaicont = (props) => {

    let data = props.data
    return (
        <Divcon> 
            <Tabs tabs={tabs2}
                initialPage={0}
                renderTab={tab => <span>{tab.title}</span>}
            >
                <Leftdiv >
                    <div className='left-top'>
                        <span>班级平均分</span>
                        <p>{data.cavg}<em>分</em> </p>
                        <span>{data.fnum}人完成</span>
                        <ul>
                            <li>
                                <p>未完成</p>
                                <p><i>{data.ufnum}人</i><span onClick={()=> Toast.success('提示成功!!!', 1)}>催促</span></p>
                            </li>
                            <li>
                                <p>作业内容</p>
                                <p>题量少</p>
                            </li>
                        </ul>
                    </div>
                    <div  className='left-bottom'>
                        <h2>学生情况</h2>
                        <h3><span>姓名</span><span>平均分</span><span>用时</span></h3>
                        {
                            data.stuList&&data.stuList.map(v=>{
                                return(
                                    <h3 key={v.sid}><span>{v.sname}</span><span>{v.avg}</span><span>{v.time}</span></h3>
                                )
                            })
                        }
                        <h2>评语</h2>
                        <div className='text-input'>
                            <textarea name="" id="" cols="30" rows="10" placeholder='请输入您的评语'></textarea>
                        </div>
                    </div>
                </Leftdiv>
                <Rightdiv >
                    题目正确率：<span>{data.tru}%</span>
                    <h4><span style={{ fontSize:'0.2rem'}}>项目总结：</span>
                        <ul>
                             <li>1.技术难点: 一个列表实现多个单选。</li>
                             <li>2.项目亮点: 计步器/一个列表实现多个单选。</li>
                             <li>3.项目收获: 熟悉使用react-useState/useHostory/useLoaction hooks。</li>
                        </ul>
                    </h4>
                </Rightdiv>
            </Tabs>
            <FloorBn title={'确认'} show={'none'} to={'/home'}></FloorBn>
        </Divcon>
    );
}

export default Detaicont;

